<template>
  <div >
    <h1>项目优秀类展示</h1>
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="item in 6" :key="item">
<!--        <iframe src="https://jiwang3.anyuan.online/" alt=""></iframe>-->
<!--        <el-image-->
<!--            src="@/images/微信截图_20241209150049.png"-->
<!--            :zoom-rate="1.2"-->
<!--            :max-scale="7"-->
<!--            :min-scale="0.2"-->
<!--            :initial-index="4"-->
<!--            fit="cover"-->
<!--        />-->
        <img src="@/images/微信截图_20241209150049.png" alt="">
      </el-carousel-item>
    </el-carousel>
    <div class="card card-body">
      <el-card style="max-width: 300px" :shadow="false" v-for="item in 10" :key="item">
        <template #header>
          <p class="header">机器猫</p>
        </template>
        <img
            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
            style="width: 100%"
        />
        <template #footer>
          <div class="footer">
            <p>指导老师：宋伊娜</p>
            <p>学生：张嘉倪</p>
          </div>

        </template>

      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      images: [
        '/images/image1.jpg',
        '/images/image2.jpg',
        '/images/image3.jpg'
      ]
    };
  }
};
</script>
<style scoped>
.card-body{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  .header{
    font-weight: bold;
  }
  :deep() {
    .el-card__header{
      border-bottom:none;
    }
    .el-card__body{
      padding: 0px;
    }
    .el-card__footer{
      border-top:none;
    }
  }
  .footer{
    font-size: 12px;
  }
}
</style>